<template>
    <div class="ground-table">
        <el-table :data="tableData" height="550" style="width: 100%" class="ground-table-box">
            <el-table-column prop="Class" label="Class" width="180"></el-table-column>
            <el-table-column prop="Properties" label="Properties"></el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="copyBtn(scope.row.Class)">复制</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { mg_table_style } from "../public/common_num";

export default {
    data() {
        return {
            tableData: []
        }
    },
    created() {
        let data = mg_table_style();
        this.tableData = data;
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex < 10) {
                return 'row-px';
            } else if (rowIndex >= 10) {
                return 'row-pd';
            }
            return '';
        },
        copyBtn(data) {
            console.log(data);
            //创建一个 Input标签 
            let oInput = document.createElement('input');
            oInput.value = data;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            // 执行浏览器复制命令
            /// 复制命令会将当前选中的内容复制到剪切板中
            /// 如这里构建的 Input标签 
            document.execCommand("Copy");
            this.$message({
                message: '复制成功',
                type: 'success'
            });
            ///复制成功后再将构造的标签 移除
            oInput.remove();
        }
    }
}
</script>
<style>
.el-table .row-px {
    background: #00cccc;
}

.el-table .row-pd {
    background: #00ccff;
}

.ground-table-box table {
    margin: 0 !important;
    border-collapse: collapse;
}

.ground-table-box .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    border-bottom: none;
}
</style>
